<template>
    <view class="charts">
        
    </view>

</template>

<script>
// 引入uCharts
import uCharts from './u-charts'
export default {
    props:{

    },
    data () {
        return {
            // 图表
			chart:null,
			pixelRatio:1,
			chartData:{
				"series": [
					{
						data: [{"name":"待激活","value":2},{"name":"已激活","value":1}]
					}
				]
			}
        };
    },
    onReady() {
	  this.initChart('mayChart', this.chartData)	
    },
    mounted () {
        
    },
    methods: {
        // 图表
		initChart(canvasId,chartData){
			const _self = this
			this.cWidth = uni.upx2px(250);
			this.cHeight = uni.upx2px(250); //设置宽高
			let ctx = uni.createCanvasContext('mayChart', this);
			this.chart=new uCharts({
				$this:_self,
				context:ctx,
				canvasId: canvasId,
				type: 'ring',
				dataLabel: true,
        		enableScroll: false,
				legend:{show:false},
				rotate: false,
        		rotateLock: false,
				fontSize:11,
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				animation: true,
				color: ["#AD2926","#FFBB20"],
				// categories: chartData.categories,
				series: chartData.series,
				xAxis: {
					// disableGrid:true,
				},
				yAxis: {
					//disabled:true
				},
				dataLabel: true,
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				disablepieStrok:true,
				dataLabel:false,
				extra: {
					ring: {
						// ringWidth:40*_self.pixelRatio,
						ringWidth:15,
						offsetAngle: -45,
						labelWidth:15,
					}
				}
			});
		},
		touchRing(e){
			this.chart.showToolTip(e, {
				format: function (item) {
					return item.name + ':' + item.data +'(台)'
				}
			});
		},
    },
};
</script>

<style scoped>

</style>
